<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>添加项目</title>
		<link href="/resources/src/css/main.css" rel="stylesheet">
   		<link href="/resources/src/css/responsive.css" rel="stylesheet">
   		<link href="/resources/src/css/lib/cropper.min.css" rel="stylesheet">
		<link href="/resources/src/css/add-project.css" rel="stylesheet">
		<script type="text/javascript" src="/resources/src/js/jquery-1.9.1.min.js"></script>
	    <style type="text/css">
	    .bar-on{background-color:#ff7d5f;height:3px;width:70%}
		.uploadbar{background-color:#737687;width:200px;height:3px;margin-left:130px;margin-top:0;display:none}
	    </style>
	</head>
	<body class="sticky-header left-side-collapsed">
		<jsp:include page="../common/left-slide.jsp" flush="true">
	        <jsp:param name="pageHeader" value="projectHeader" />
	    </jsp:include>
		<div class="main-content">
			<jsp:include page="../common/header-start.jsp" />
        	<div class="main">
                <div class="right-box text-center no-padding">
                	<div class="row right-header text-left" style="margin-left:0;margin-right:0;">
						<div class="hidden-xs hidden-sm col-sm-4 title"><span>添加项目</span></div>
					</div>
					<!--content-->
					<div style="padding:20px 20px 0 20px;">
						<div class="content add-projects bg-white" style="padding:40px">
							<div class="wrapper" style="max-width:600px; margin:0 auto;">
								<div class="item clearfix text-left" style="position:relative;">
									<div class="item-label pull-left">项目Logo：</div>
									<div class="project-logo pull-left">
										<img src="/resources/src/images/project-logo.png" width="160" height="160" id="logoButton"/>
									</div>
									<div class="tips">注：logo宽高比建议1:1</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left red-start">项目名称：</div>
									<div class="pull-left">
										<input type="text" id="project-name" placeholder="请输入项目名"/>
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left">公司名称：</div>
									<div class="pull-left">
										<input type="text" id="company" placeholder="请输入公司名称"/>
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left red-start">项目行业：</div>
									<div class="select pull-left">
										<input type="text" id="business" readonly="readonly" placeholder="请选择行业"/><i class="iconfont icon-control-arr-copy-copy"></i>
										<div class="options-box">
											<c:forEach items="${fieldList }" var="field">
												<span class="options" data-value='${field.id }'>${field.fieldName }<i class="pull-right iconfont icon-gou"></i></span>
											</c:forEach>
										</div>
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left red-start">当前轮次：</div>
									<div class="select pull-left">
										<input type="text" id="round" readonly="readonly" placeholder="请选择轮次"/><i class="iconfont icon-control-arr-copy-copy"></i>
										<div class="options-box">
											<c:forEach items="${roundList }" var="round">
												<span class="options" data-value='${round.id }'>${round.name }<i class="pull-right iconfont icon-gou"></i></span>
											</c:forEach>
										</div>
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left red-start">所在地区：</div>
									<div class="select pull-left">
										<input type="hidden" id="city" style="display:none; "/>
										<input type="text" class="city" placeholder="请选择城市"/>
										<i class="iconfont icon-control-arr-copy-copy"></i>
										<div class="options-box selCity">
											<c:forEach items="${areaList }" var="area">
												<span class="options" data-value='${area.id }'>${area.name }<i class="pull-right iconfont icon-gou"></i></span>
											</c:forEach>
										</div>
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left">产品链接：</div>
									<div class="pull-left"><input type="text" id="link" placeholder="请输入产品链接地址"/></div>
								</div>
								<div id="business plan" class="item clearfix">
									<div class="item-label pull-left red-start">商业计划书：</div>
									<div class="upload pull-left" id="BpButton">上传文件</div>
									<div class="pmgressbar-box pull-left" style="display:none;">
										<div class="pmgressbar" id="bpProgressBar"><span></span></div>
									</div>
									<div class="current-file text-left pull-left">
										当前文件：<a>商业计划书</a>	
										<!--<i class="iconfont icon-icon1 current-file-close"></i>-->
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left red-start">出让股权：</div>
									<div class="pull-left quantifier-input">
										<span class="quantifier text-center">%</span>
										<input type="text" id="equity" placeholder="请输入出让股权"/>	
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left red-start">融资金额：</div>
									<div class="pull-left">
										<div class="pull-left quantifier-input" style="margin-right:20px;">
											<span class="quantifier text-center">万</span>
											<input type="text" id="money" placeholder="请输入金额" />	
										</div>
										<div class="select pull-left">
											<input type="text" id="currency" readonly="readonly" data-value="1" value="人民币"/>
											<i class="iconfont icon-control-arr-copy-copy"></i>
											<div class="options-box">
												<span class="options" data-value='1'>人民币<i class="pull-right iconfont icon-gou"></i></span>
												<span class="options" data-value='2'>美元<i class="pull-right iconfont icon-gou"></i></span>
											</div>
										</div>
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left">亮点标签：</div>
									<div class="pull-left">
										<div class="tags text-left">
											<input type="text" id="tag" placeholder="填写标签，完成后回车确认
	"/>
										</div>
										<i class="iconfont icon-wenti" data-toggle="tooltip" title="可从团队成员经历、项目目前业绩等方面描述。"></i>
									</div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left red-start">联系人姓名：</div>
									<div class="pull-left"><input type="text" id="name" placeholder="请输入联系人姓名"/></div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left red-start">联系人电话：</div>
									<div class="pull-left"><input type="text" id="phone" placeholder="请输入联系人手机"/></div>
								</div>
								<div class="item clearfix">
									<div class="item-label pull-left">项目简介：</div>
									<div class="pull-left">
										<div class="txt">
											<textarea id="comment" maxlength="500" placeholder="请输入项目简介"></textarea>
											<p class="txt-tip text-right">0/500</p>
										</div>
									</div>
								</div>
								<div class="btn-row text-center">
									<a id="cancel" href="/projects/list">取消</a>
									<a id="save">保存</a>
								</div>
							</div>
						</div>
					</div>
                </div>
            </div>
        </div>
       
        <!--logo裁剪模态框-->
        <div id="cutpic-modal">
        	<div class="cutpic-content">
        		<div class="cutpic-body clearfix">
        			<div class="current-pic pull-left">
	        			<img src="/resources/src/images/project-logo.png"/>
	        		</div>
	        		<div class="preview-container pull-left text-center">
	        			<div class="preview"></div>
	        			<p>效果预览</p>
	        		</div>
        		</div>
        		<div class="cutpic-footer">
        			<p class="current-pic-btn"><button class="cancel-upload-logo">取消</button><button class="save-cut-logo">保存</button></p>
        		</div>
        	</div>
        </div>

       
       <input type="hidden" id="userProType" value="${type }"/>
       
	   <script src="/resources/src/js/jquery.nicescroll.js"></script>
	   <script src="/resources/src/js/main.js"></script>
	   <script src="/resources/src/js/bootstrap.min.js"></script>
	   <script src="/resources/src/js/add-project.js"></script>    
   	   <jsp:include page="/common/plupload/pluploadInclude.jsp"></jsp:include>
	   
	   <script type="text/javascript">
	   	   $(function(){
	   		   uploadLogo();
	   		   uploadBP();
	   	   });
	   		
	   	   //上传图片
	       function uploadLogo(){
		       	/********上传头像********/
		       	var clickId = "logoButton"; //上传按钮id
		       	var fileName = "imageFile"; //文件对应服务器名字
		       	var url = '/uploadFile/img';
		       	var maxFileSize = '5mb'; //文件最大尺寸
		       	var FileType = 'jpg,gif,png,jpeg'; //文件类型
		       	var progressBar = ''; //文件上传进度条
		       	var successType = 'img'; //文件处理类型判断，主要用于区分裁剪功能
		       	var showImgDiv = '#logoButton,.current-pic img' //文件上传后，显示在哪个DIV
		       	uploadFile(fileName, url, clickId, maxFileSize, FileType, progressBar, successType, showImgDiv); //上传图片
	       }
		   
		   //上传商业计划书
	       function uploadBP(){
		       	/********上传BP********/
		       	var clickId = "BpButton"; //上传按钮id
		       	var fileName = "bpFile"; //文件对应服务器名字
		       	var url = '/uploadFile/bp';
		       	var maxFileSize = '50mb'; //文件最大尺寸
		       	var FileType = 'ppt,pptx,doc,docx,pdf'; //文件类型
		       	var progressBar = '#bpProgressBar'; //文件上传进度条
		       	var successType = 'BPFile'; //文件处理类型判断，主要用于区分裁剪功能
		       	var showImgDiv = '#BpButton' //文件上传后，显示在哪个DIV
		       	uploadFile(fileName, url, clickId, maxFileSize, FileType, progressBar, successType, showImgDiv); //上传图片
	       }
	   </script>
	   
	   <script src="/resources/src/js/cropper.min.js"></script> 
   	   <script>
   	        jQuery(function($){
   	        	
   	        	var cutPicData={};

        		$(".current-pic>img").cropper({
				    aspectRatio: 1 / 1,
				    preview:'.preview',
				    minCropBoxWidth:150,
				    minCropBoxHeight:150,
				    crop: function(e) {
				    	//获取图片裁剪参数
				    	cutPicData.x=parseInt(e.x);
					    cutPicData.y=parseInt(e.y);
					    cutPicData.width=parseInt(e.width);
					    cutPicData.height=parseInt(e.height);
					    cutPicData.src=$(".current-pic>img").attr('src');
				    }
				}); 
   	        	
				//保存裁剪
				$(".save-cut-logo").click(function(){
					console.log(cutPicData); 
					$.post(
						"/projects/cutLogo",
						{
							"x":cutPicData.x,
							"y":cutPicData.y,
							"width":cutPicData.width,
							"height":cutPicData.height,
							"url":cutPicData.src
						},
						function(data){
							console.log(data);
							if(data.status==true){
								$("#logoButton").attr("src",data.data);
								$("#logoButton").attr("value",data.data);
							}
						},"json"
					);
					
					
					//关闭裁剪框
					$("#cutpic-modal").hide();
				});
				
				$(".cancel-upload-logo").click(function(){
					$("#cutpic-modal").hide();
				});
			});
   	   </script>
       	
	</body>
</html>